<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <div>
            <span class="leve_title" >售后单详情</span>
          </div>
          <div>
            <el-button
              @click="back"
            >
              返回
            </el-button>
          </div>
        </div>
      </template>
      <div>
        <SalesStage :steps="arr_approve" @clickValue="(va:any)=>{
          statusType = va
        }"/>
      </div>
    </el-card>
    <div v-if ="statusType == 2 || statusType== 3 && typeStatusCode == 'reissue' " >
      <el-card class="box-card" v-if="logistics">
        <template #header>
          <div class="customerTitle1">
            <div>
              <span class="leve2_title" >快递运输</span>
            </div>
          </div>
        </template>
        <div class="detail-mode">
          <span class="label">售后物流信息</span>
          <span class="text">
                 {{typeStatusName || ''}}物流 已更新：{{  logistics[0]?.time || '--'}}
                </span>
          <el-button size="small" type="primary" @click="lookLogistics(getLogisticsList.express_sn, getLogisticsList.express_company,'')">
            查看物流详情
          </el-button>
        </div>
      </el-card>
    </div>
    <div v-if ='statusType != 1 && statusType != 2 && statusType != 5 ' >
      <el-card class="box-card">
        <template #header>
          <div class="customerTitle1">
            <div>
              <span class="leve2_title" > {{typeStatusCode == 'reissue'?'补发出库信息':'退货入库单信息'}} </span>
            </div>
          </div>
        </template>
        <div>
          <el-table
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            border
            :data="salesOrderList"
            min-height="450px"
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="售后分类" align="center" min-width="100" fixed="left">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.type_text}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="200" fixed="left">
              <template #header>
                <span>
                  {{typeStatusCode == 'reissue' ? '出库单号':'入库单号'}}
                </span>
              </template>
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.return_order_id || '--'}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" min-width="200" fixed="left">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.warehouse_name}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_type,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column :label="typeStatusCode == 'reissue' ? '补发数量': '退货数量' " align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               ><span > {{typeStatusCode != 'reissue' ? scope.row.return_number : scope.row.reissue_number || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" v-if="typeStatusCode != 'reissue'" width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
               >
                 <span > {{scope.row.unit_price || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="申请退款金额" v-if="typeStatusCode != 'reissue'" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               ><span > {{scope.row.return_amount || '0.00'}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="实际退货数量"  align="center" min-width="150" v-if="statusType == 4 && typeStatusCode != 'reissue'">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               ><span > {{_FieldFormat(scope.row.real_return_number,  'number') || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="实际退款金额" align="center" min-width="150" v-if="statusType == 4 && typeStatusCode != 'reissue'">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >
                 {{scope.row.real_return_amount || '0.00'}}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.batch_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="生产日期" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.product_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="有效期至" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.expire_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.barcode,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="收货地址" align="center" width="150" v-if="typeStatusCode == 'reissue'&& statusType == 3 ">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.address,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="收货联系人" align="center" width="150" v-if="typeStatusCode == 'reissue' && statusType == 3">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_user,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center" width="150" v-if="typeStatusCode == 'reissue' && statusType == 3">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_tel,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.remark,  '')"
               ></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div v-if ="statusType == 2 || statusType == 5">
      <DetailInformation ref="detailRef" typeStatus="2" :typeDate="statusType === 5 ? 1:0" :type1="statusType"/>
    </div>
    <div v-if ="statusType== 3 && typeStatusCode != 'reissue' " >
      <el-card class="box-card" v-if="logistics">
        <template #header>
          <div class="customerTitle1">
            <div>
              <span class="leve2_title" >快递运输</span>
            </div>
          </div>
        </template>
        <div class="detail-mode">
          <span class="label">售后物流信息</span>
          <span class="text">
                 {{typeStatusName || ''}}物流 已更新：{{  logistics[0]?.time || '--'}}
                </span>
          <el-button size="small" type="primary" @click="lookLogistics(getLogisticsList.express_sn, getLogisticsList.express_company,'')">
            查看物流详情
          </el-button>
        </div>
      </el-card>
    </div>
    <VabCard>
      <template #header>
        <span class="leve2_title leave3Title" >售后信息</span>
      </template>
      <template #default >
        <el-row :gutter="24">
          <el-col
            v-for="(item, i) in procure_list"
            :key="i"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="6"
          >
            <div class="detail-mode"  v-if="item.label != '退货原因' && item.label != '备注'">
              <span class="label" style="width: 85px">{{ item.label }}</span>
              <span class="text">
                {{ item.value}}
                </span>
            </div>
            <div class="detail-mode" v-if="item.label == '退货原因' || item.label == '备注'">
              <span class="label" style="width: 85px">{{item.label}}</span>
              <span class="text height">
                  {{ item.value}}
                </span>
            </div>
          </el-col>
        </el-row>
      </template>
    </VabCard>
    <div v-if ='statusType == 1'>
      <DetailInformation ref="detailRef" typeStatus="2" :type1="statusType" />
    </div>

    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title" >图片</span>
        </div>
      </template>
      <div style="min-height: 100px;">
       <span v-for="item in fileList" :key="item.index" style="margin-right: 10px;margin-bottom: 5px;flex-wrap: wrap">
          <el-image class="image" :src="item.url"   :zoom-rate="1.2" :preview-src-list="fileList.map((i)=>i.url)" :initial-index="4"   fit="cover"  />
       </span>
        <div v-if="fileList.length == 0" class="noList">
          暂无图片
        </div>
      </div>
    </el-card>
    <AuditInformation />
    <!-- 变更记录 logArray -->
    <SalesChange ref="salesChangeRef" />
    <LogisticsDetails ref="logisticsDetailsRef" />

  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import DetailInformation from './DetailInformation.vue'
import SalesChange from './SalesChange.vue'
import SalesStage from './SalesStage.vue'
import {FieldFormat} from "/@/utils/utils";
import router from "/@/router";
import {getRefundInfo} from "/@/api/dms/refund";
import salesOrderStore from "/@/views/afterSales/storeList";
import logisticsList from "/@/utils/json/express.json"
import {expressList} from "/@/api/dms/express";
import LogisticsDetails from './LogisticsDetails.vue'
import AuditInformation from './AuditInformation.vue'
defineOptions({
    name: 'SalesDetails',
  })
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const detailRef =  ref<any>(undefined)
const route:any = useRoute()
const loading = ref<boolean>(false)
const salesOrderList = ref<any>([])
let fileList = ref<any>([])
const salesChangeRef = ref<any>()
const salesOrderStoreList:any = salesOrderStore()
const {salesSortValue} = salesOrderStoreList
const logisticsDetailsRef = ref<any>(null)
const getLogisticsList = ref<any>(undefined)
// 物流
const logistics = ref<any>(undefined)
const procure_list = ref([
  {label:'售后单号',value:''},
  // {label:'销售组织',value:''},
  {label:'客户',value:''},
  // {label:'结算组织',value:''},
  // {label:'订单号',value:''},
  {label:'售后登记时间',value:''},
  {label:'销售员',value:''},

  // {label:'订单下单时间',value:''},
  // {label:'仓库',value: ''},
  {label:'售后单状态',value:''},
  {label:'售后分类',value:''},
  {label:'实际退款金额',value:''},
  {label:'退货原因',value:''},
  {label:'运输方式',value:''},
  {label:'快递单号',value:''},
  {label:'备注',value:''},

])
const statusType = ref<number>(1)
const arr_approve = ref<any>([
  { title: '售后单', active: true,type:1},
  { title: '快递运输', active: false,type:2 },
  { title: '退货入库单', active: false,type:3 },
  { title: '退货确认', active: false,type:4 },
])
const back = ()=>{
  if(route.query.path == 1){
    router.push('/sales/salesOrder')
  }else if(route.query.path == 2) {
    router.push('/order/customerOrder')
  }else if(route.query.path == 3) {
    router.push('/order/orderQuery')
  }else if(route.query.path == 4) {
    router.push('/order/standardOrder')
  }

}
const typeStatusName = ref<any>(undefined)
const typeStatusCode = ref<any>(undefined)
//获取快递信息
const expressDelivery = (express_sn:any,express_company:any)=>{
  if(express_sn !=='' &&  express_company !=='' ){
    expressList({num:express_sn,com:express_company,phone:''}).then((data:any)=>{
      if(data.code == 200){
        logistics.value =data.data || []
      }
    }).catch(()=>{
      logistics.value = []
    })
  }
}
const getOrderInfo = ()=>{
  if(route.query.uid){
    getRefundInfo({afterSalesUid:route.query.uid}).then((data:any)=>{
      if(data.code == 200){
        procure_list.value = [
          {label:'售后单号',value:data.data.info.uid},
          {label:'客户',value:data.data.info.customer_name},
          {label:'售后登记时间',value:data.data.info.created_at},
          {label:'销售员',value:data.data.info.created_user_name},
          {label:'售后单状态',value:data.data.info.status_text},
          {label:'售后分类',value:data.data.info.type_text},
          {label:'实际退款金额',value:data.data.info.real_return_amount},
          {label:'退货原因',value:data.data.info.reason},
          {label:'运输方式',value:getLogistics(data.data.info.express_company)},
          {label:'快递单号',value:data.data.info.express_sn},
          {label:'备注',value:data.data.info.remark},
        ]
        fileList.value= data.data.info.attachment || []
        getLogisticsList.value = data.data.info
        salesOrderStoreList.set_orderList({...data.data,after_item:data.data.after_item,goods_item:data.data.goods_item})
        salesChangeRef.value.logArray = data.data.log
        typeStatusName.value = data.data.info.type_text
        salesOrderStoreList.set_salesSortValue({label:data.data.info.type,type:1})
        typeStatusCode.value = data.data.info.type
        if(data.data.info.type == 'return'){
          //判断 售后类型  进行操作流程
           arr_approve.value = [
             { title: '售后单', active: true,type:1},
             { title: '快递运输', active: false,type:2 },
             { title: '退货入库单', active: false,type:3 },
             { title: '退货确认', active: false,type:4 },
           ]
          if(data.data.info.status == 302){  // 快递运输
            arr_approve.value[1].active = true
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }else if(data.data.info.status == 401){ //退货入库单
            arr_approve.value[1].active = true
            arr_approve.value[2].active = true
            salesOrderList.value = data.data.after_item?.filter((item:any)=> item.is_return == 1)
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }else if (data.data.info.status == 501){ //退货确认
            arr_approve.value[1].active = true
            arr_approve.value[2].active = true
            arr_approve.value[3].active = true
            salesOrderList.value = data.data.after_item?.filter((item:any)=> item.is_return == 1)
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }
        }else {
          arr_approve.value = [
            { title: '售后单', active: true,type:1},
            { title: '销售出库单', active: false,type:5 },
            { title: '快递运输', active: false,type:3 },
            { title: '收货确认', active: false,type:4 },
          ]
          if(data.data.info.status == 302){  // 补发入库 data.data.info.status == 302 && data.data.info.is_all_sold == 1
            salesOrderList.value = data.data.after_item?.filter((item:any)=> item.is_return == 1)
            arr_approve.value[1].active = true
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }else if(data.data.info.status == 401){ //运输方式
            arr_approve.value[1].active = true
            arr_approve.value[2].active = true
            salesOrderList.value = data.data.after_item?.filter((item:any)=> item.is_return == 1)
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }else if (data.data.info.status == 501){ //确认
            arr_approve.value[1].active = true
            arr_approve.value[2].active = true
            arr_approve.value[3].active = true
            salesOrderList.value = data.data.after_item?.filter((item:any)=> item.is_return == 1)
            expressDelivery(data.data.info.express_sn,data.data.info.express_company)
          }
        }
      }
    })
  }
}
//获取对应的运输方式
const getLogistics=(value:any)=>{
 const arr =  logisticsList.filter((i:any)=> i.code == value) || [{name:' '}]
  return arr[0]?.name || ''
}
//查看物流
const lookLogistics = (num:any,com:any,phone:any)=>{
  logisticsDetailsRef.value.openUp = logistics.value || []

}
onBeforeRouteLeave((to, from, next)=>{
  salesOrderStoreList.set_orderList(undefined)
  salesOrderStoreList.set_salesSortValue({label:'',type:1})
  next()
})
onMounted(()=>{
  getOrderInfo()
})

/*watchEffect(()=>{
  if( detailRef.value){
    detailRef.value.title = {title1:'售后明细信息',title2:'商品明细信息'}
  }
})*/
</script>

<style lang="scss" scoped>
@import "../index";
.noList{
  width: 100%;padding-top:40px;text-align: center
}
.image{
  width: 100px; height: 100px
}
</style>

